<template>
  <div class="home-model-test">
    <div class="header">
      <h1>家居模型测试</h1>
      <p>测试家居模型的三维显示功能</p>
    </div>
    
    <div class="model-selector">
      <h3>选择家居模型：</h3>
      <a-select 
        v-model="selectedModelIndex" 
        placeholder="请选择模型"
        style="width: 300px"
        @change="onModelChange"
      >
        <a-option 
          v-for="(model, index) in homeModels" 
          :key="index" 
          :value="index"
        >
          {{ model.displayName }}
        </a-option>
      </a-select>
    </div>
    
    <div class="model-viewer-container">
      <ThreeJSView 
        ref="threeViewer"
        :model-path="currentModelPath"
        :key="currentModelPath"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import ThreeJSView from '@/components/ThreeJSView.vue'

// 生成家居模型数据的函数
const generateHomeModels = () => {
  const modelFiles = [
    'armchair-001.obj', 'armchair-002.obj', 'armchair-007.obj', 'armchair-with-cushion-001.obj',
    'baby-bassinet-001.obj', 'baby-chair-001.obj', 'bar-counter-001.obj', 'bean-bag-chair-001.obj',
    'bed-001.obj', 'bench-007.obj', 'bench-008.obj', 'bench-009.obj', 'bench-010.obj', 'bench-table-001.obj',
    'bookcase-001.obj', 'bookshelf-001.obj', 'cabinet-001.obj', 'cabinet-002.obj', 'chair-002.obj',
    'chair-005.obj', 'chair-009.obj', 'chair-012.obj', 'chair-013.obj', 'chair-018.obj', 'chair-024.obj',
    'chair-025.obj', 'chair-032.obj', 'chair-035.obj', 'chair-039.obj', 'closet-001.obj', 'coffee-table-001.obj',
    'console-001.obj', 'contemporary-sofa-001.obj', 'counter-006.obj', 'coworking-booth-001.obj', 'desk-002.obj',
    'desk-004.obj', 'drawer-dresser-001.obj', 'dresser-drawer-002.obj', 'folding-chair-001.obj', 'folding-chair-002.obj',
    'folding-tray-table-001.obj', 'gamer-desk-001.obj', 'gamer-pouf-001.obj', 'gaming-chair-001.obj', 'garden-shelf-001.obj',
    'high-round-stool-001.obj', 'high-stool-001.obj', 'irregular-sideboard-001.obj', 'kids-chair-002.obj', 'kids-chair-004.obj',
    'kids-plastic-table-001.obj', 'kids-rocking-chair-001.obj', 'kids-stool-001.obj', 'long-stand-001.obj', 'luxury-side-table-set-001.obj',
    'night-table-001.obj', 'nightstand-001.obj', 'nightstand-003.obj', 'nursery-drawer-001.obj', 'office-chair-001.obj',
    'oval-chair-001.obj', 'pouf-001.obj', 'reception-counter-002.obj', 'round-chair-001.obj', 'round-kids-stall-001.obj',
    'round-table-006.obj', 'seat-001.obj', 'seat-002.obj', 'shelf-012.obj', 'sideboard-002.obj', 'sideboard-003.obj',
    'small-nightstand-001.obj', 'sofa-001.obj', 'sofa-004.obj', 'sofa-007.obj', 'sofa-008.obj', 'sofa-bed-001.obj',
    'sofa-bed-002.obj', 'square-chair-001.obj', 'square-chair-002.obj', 'square-ottoman-bench-001.obj', 'square-table-001.obj',
    'stand-001.obj', 'stool-002.obj', 'table-005.obj', 'table-006.obj', 'table-013.obj', 'table-015.obj', 'table-016.obj',
    'table-017.obj', 'table-chair-001.obj', 'tall-wardrobe-001.obj', 'tier-countertop-001.obj', 'toddler-bed-001.obj',
    'tv-cabinet-001.obj', 'tv-cabinet-002.obj', 'wood-large-table-001.obj', 'wooden-bar-caddy-001.obj', 'wooden-rocking-chair-001.obj'
  ]
  
  const modelTypes = {
    'armchair': '扶手椅',
    'baby': '婴儿家具',
    'bar': '吧台',
    'bean': '豆袋椅',
    'bed': '床',
    'bench': '长椅',
    'bookcase': '书柜',
    'bookshelf': '书架',
    'cabinet': '柜子',
    'chair': '椅子',
    'closet': '衣柜',
    'coffee': '咖啡桌',
    'console': '控制台',
    'contemporary': '现代沙发',
    'counter': '柜台',
    'coworking': '办公隔间',
    'desk': '桌子',
    'drawer': '抽屉柜',
    'dresser': '梳妆台',
    'folding': '折叠椅',
    'gamer': '游戏家具',
    'gaming': '游戏椅',
    'garden': '花园家具',
    'high': '高脚椅',
    'irregular': '不规则边柜',
    'kids': '儿童家具',
    'long': '长桌',
    'luxury': '豪华边桌',
    'night': '床头柜',
    'nursery': '婴儿房家具',
    'office': '办公椅',
    'oval': '椭圆形椅子',
    'pouf': '蒲团',
    'reception': '接待台',
    'round': '圆形家具',
    'seat': '座椅',
    'shelf': '架子',
    'sideboard': '餐具柜',
    'small': '小床头柜',
    'sofa': '沙发',
    'square': '方形家具',
    'stand': '支架',
    'stool': '凳子',
    'table': '桌子',
    'tall': '高衣柜',
    'tier': '分层柜台',
    'toddler': '幼儿床',
    'tv': '电视柜',
    'wood': '木制家具',
    'wooden': '木制家具'
  }
  
  return modelFiles.map((fileName, index) => {
    const nameWithoutExt = fileName.replace('.obj', '')
    const displayName = nameWithoutExt.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
    
    // 根据文件名确定家具类型
    let type = '家具'
    for (const [key, value] of Object.entries(modelTypes)) {
      if (nameWithoutExt.includes(key)) {
        type = value
        break
      }
    }
    
    // 生成随机文件大小 (1-5MB)
    const size = (Math.random() * 4 + 1).toFixed(1) + 'MB'
    
    return {
      name: fileName,
      displayName: displayName,
      description: `智能家居${type}模型，适用于现代家居设计`,
      path: `/家居模型/${fileName}`,
      size: size
    }
  })
}

// 家居模型数据
const homeModels = ref(generateHomeModels())

const selectedModelIndex = ref(0)
const threeViewer = ref(null)

// 计算当前模型路径
const currentModelPath = computed(() => {
  if (selectedModelIndex.value !== null && homeModels.value[selectedModelIndex.value]) {
    return homeModels.value[selectedModelIndex.value].path
  }
  return null
})

// 模型切换处理
const onModelChange = (index) => {
  console.log('切换到模型:', homeModels.value[index].displayName)
}
</script>

<style scoped>
.home-model-test {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.header {
  margin-bottom: 20px;
  text-align: center;
}

.header h1 {
  margin: 0 0 8px 0;
  color: #1d2129;
  font-size: 24px;
  font-weight: 600;
}

.header p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.model-selector {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.model-selector h3 {
  margin: 0 0 12px 0;
  color: #1d2129;
  font-size: 16px;
  font-weight: 600;
}

.model-viewer-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}
</style>

